<script setup>
import { computed } from "@vue/reactivity";
import { ref, onMounted } from "vue";
import ProductCard from "../../components/ProductCard.vue";
// import products from "../../store/products.js";
import { productsStore } from "../../store"; // 切换为 store

// 产品列表
const product = productsStore();
const filterBrand = ref("");
const filterColor = ref("");
const order = ref("");

const lists = computed(() => {
	return product.productsList;
});

const brands = computed(() => {
	// let brands = products.map(item => item.brand)
	// return getFilterArray(brands)
	return product.brands; // 从 store 中获取
});

const colors = computed(() => {
	// let colors = products.map((item) => item.color);
	// return getFilterArray(colors);
	return product.colors; // 从 store 中获取
});

const filteredAndOrderedList = computed(() => {
	// console.log(productList.value)
	let list = [...lists.value];
	// 按品牌过滤
	if (filterBrand.value !== "") {
		list = list.filter((item) => item.brand === filterBrand.value);
	}
	// 按颜色过滤
	if (filterColor.value !== "") {
		list = list.filter((item) => item.color === filterColor.value);
	}
	// 排序
	if (order.value !== "") {
		if (order.value === "sales") {
			list = list.sort((a, b) => b.sales - a.sales);
		} else if (order.value === "cost-desc") {
			list = list.sort((a, b) => b.cost - a.cost);
		} else if (order.value === "cost-asc") {
			list = list.sort((a, b) => a.cost - b.cost);
		}
	}
	// console.log(list);
	return list;
});


/**
 * methods
 */

onMounted(() => {
	// console.log('onMounted —— 组件挂载后执行')
	product.getProductList()
})


/**
 * 手动过滤对应品牌
 * @param {*} brand 
 */
function handleFilterBrand(brand) {
	// console.log(brand);
	if (filterBrand.value === brand) {
		filterBrand.value = "";
	} else {
		filterBrand.value = brand;
	}
}

/**
 * 手动过滤对应颜色
 * @param {*} color 
 */
function handleFilterColor(color) {
	// console.log(color);
	if (filterColor.value === color) {
		filterColor.value = "";
	} else {
		filterColor.value = color;
	}
}

/**
 * 手动销量排序
 */
function handleOrderDefault() {
	// console.log(order.value)
	order.value = "";
}

/**
 * 手动价格排序
 */
function handleOrderSales() {
	// console.log(order.value)
	if (order.value === "sales-desc") {
		order.value = "sales-asc";
	} else {
		order.value = "sales-desc";
	}
}

function handleOrderCost() {
	// console.log(order.value)
	if (order.value === "cost-desc") {
		order.value = "cost-asc";
	} else {
		order.value = "cost-desc";
	}
}
</script>

<template>
	<div class="list-control" v-show="lists.length">
		<div class="list-control-filter">
			<span>品牌：</span>
			<span class="list-control-filter-item" :class="{ on: item === filterBrand }" v-for="item in brands"
				@click="handleFilterBrand(item)" :key="item">{{ item }}</span>
		</div>
		<div class="list-control-filter">
			<span>颜色：</span>
			<span class="list-control-filter-item" :class="{ on: item === filterColor }" v-for="item in colors"
				@click="handleFilterColor(item)" :key="item">{{ item }}</span>
		</div>
		<div class="list-control-order">
			<span>排序：</span>
			<span class="list-control-order-item" :class="{ on: order === '' }" @click="handleOrderDefault">默认</span>
			<span class="list-control-order-item" :class="{ on: order.indexOf('sales') > -1 }" @click="handleOrderSales">
				销量
				<template v-if="order === 'sales-asc'">↑</template>
				<template v-if="order === 'sales-desc'">↓</template>
			</span>
			<span class="list-control-order-item" :class="{ on: order.indexOf('cost') > -1 }" @click="handleOrderCost">
				价格
				<template v-if="order === 'cost-asc'">↑</template>
				<template v-if="order === 'cost-desc'">↓</template>
			</span>
		</div>
	</div>

	<!-- <h1 style="margin-left: 20px;">商品列表</h1> -->
	<div class="product-list">
		<!-- < v-for="product in productList" :info="product" :key="product.id" /> -->
		<ProductCard v-for="item in filteredAndOrderedList" :info="item" :key="item.id" />
		<div v-show="!filteredAndOrderedList.length">暂无相关商品</div>
	</div>
</template>

<style scoped>
.product-list {
	width: 95%;
	margin: 20px;
	columns: 1;
	column-gap: 30px;
	/* box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.062); */
}

@media screen and (min-width: 810px) {
	.product-list {
		columns: 3;
	}
}

@media screen and (min-width: 1024px) {
	.product-list {
		columns: 4;
	}
}

/*  */
.list-control {
	background: #fff;
	border-radius: 6px;
	margin: 16px;
	padding: 16px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.list-control-filter {
	margin-bottom: 16px;
}

.list-control-filter-item,
.list-control-order-item {
	cursor: pointer;
	display: inline-block;
	border: 1px solid #e9eaec;
	border-radius: 4px;
	margin-right: 6px;
	padding: 2px 6px;
}

.list-control-filter-item.on,
.list-control-order-item.on {
	background: #f2352e;
	border: 1px solid #f2352e;
	color: #fff;
}

.product-not-found {
	text-align: center;
	padding: 32px;
}
</style>
